html {
	height: 100%;
	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
	overflow: hidden;
}

$sky-size: 2000;

@function generate-star($num) {
	$value: '#{random($ky-size)}px #{random($sky-size)}px #fff';

	@for $i from 2 through $num {
		$value: '#{$value},#{random($sky-size)}px #{random($sky-size)}px #fff';
	}

	@return unquote($string: $value);
}

.strat {
	width: 1px;
	height: 1px;
	background-color: transparent;
	box-shadow: generate-star(700);
	animation: animate 80s linear infinite;
}

.medium-strar {
	width: 1px;
	height: 1px;
	background-color: transparent;
	box-shadow: generate-star(400);
	animation: animate 80s linear infinite;
}

.big-star {
	width: 1px;
	height: 1px;
	background-color: transparent;
	box-shadow: generate-star(100);
	animation: animate 80s linear infinite;
}

@keyframes animate {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(unquote('-#{$sky-size}px'));
	}
}